import * as React from 'react';
import ReactEcharts from 'echarts-for-react';

export default class StackBarEchart extends React.Component {
  render() {
    const { originData, style } = this.props;
    // const originData = [
    //   {
    //     "devname": "张三",
    //     "trend": [
    //       {
    //         "name": "v1.0",
    //         "value": 5
    //       },
    //       {
    //         "name": "v1.1",
    //         "value": 4
    //       },
    //       {
    //         "name": "v1.2",
    //         "value": 12
    //       },
    //       {
    //         "name": "v1.3",
    //         "value": 6
    //       }
    //     ]
    //   },
    //   {
    //     "devname": "李四",
    //     "trend": [
    //       {
    //         "name": "v1.0",
    //         "value": 9
    //       },
    //       {
    //         "name": "v1.1",
    //         "value": 8
    //       },
    //       {
    //         "name": "v1.2",
    //         "value": 25
    //       },
    //       {
    //         "name": "v1.3",
    //         "value": 17
    //       }
    //     ]
    //   },
    //   {
    //     "devname": "王五",
    //     "trend": [
    //       {
    //         "name": "v1.0",
    //         "value": 30
    //       },
    //       {
    //         "name": "v1.1",
    //         "value": 11
    //       },
    //       {
    //         "name": "v1.2",
    //         "value": 0
    //       },
    //       {
    //         "name": "v1.3",
    //         "value": 0
    //       }
    //     ]
    //   }];
    // const originData1 = [
    //   {
    //     "devname": "张三",
    //     "trend": [
          
    //     ]
    //   }]
    let series = [];
    let dataset = [];
    if(originData){
      originData.forEach((data, index) => {
        series.push({
          name: data.versionName,
          type: 'bar',
          datasetIndex: index, // 对应dataset里面第几个数据
          stack: '总量', // 要堆叠的核心，名字无所谓，作用是把相同name的给堆叠起来
          label: {
            show: true,
            position: 'insideRight'
          },
        });
        if(data.trend.length!==0){
          dataset.push({
            dimensions: ['name', 'value'], // 第一个分类的字段 第二个是值的字段
            source: data.trend,
          });
        }
      });
    }else{
      
      return (<div style={style} className="ant-table-placeholder">暂无数据</div>);
    }
    
    const configinfo={
      dataset: dataset,
      // title: {
      //   text: '柱状图堆叠',
      //   textStyle:{
      //     color:'#CC00FF',        //颜色
      //     fontStyle:'normal',     //风格
      //     fontWeight:'500',    //粗细
      //     fontFamily:'"Monospaced Number", "Chinese Quote", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif',   //字体
      //     fontSize:16,     //大小
      //     align:'center'   //水平对齐
      //   },
      // },
      tooltip: {
        trigger: 'axis'
      },
      legend: {
        show: true,
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      },
      toolbox: {
        feature: {
          saveAsImage: {}
        }
      },
      xAxis: {
        type: 'value',
        boundaryGap: false,
        axisLine:{
          show : true,
        }
      },
      yAxis: {
        type: 'category',
        axisLine:{
          show : true,
        }
      },
      series: series,
    };
    return (
      <ReactEcharts
        // style={{ width: '100%', height: 500 }}
        style={{width: '100%', height: '300px'}}
        option={configinfo}
      />
    );
  }
}
